<!DOCTYPE html>
<html>
<head>
    {include file='public/meta'/}
    <link rel="stylesheet" href="__STATIC_URL__/static/css/bootstrapSwitch.css">
    <link rel="stylesheet" href="__STATIC_URL__/static/css/setcard.css"/>

    <script src="__STATIC_URL__/static/js/bootstrapSwitch.js"></script>
    <style>

      
        .card-left .activityTitle {
            position: absolute;
            top: 29px;
            color: #fff;
            font-size: 14px;
            width: 162px;
            white-space: nowrap;
            left: 130px;
            display: inline-block;
            overflow: hidden;
        }
        .card-left .commodityImgBox {
            width: 298px;
            height: 253px;
            margin: 10px;
            border-radius: 3px ;
            background:#fff;
        }
        .card-left .commodityImg,.img {
            width: 100%;
            height: 203px;
            background-size: 100%;

        }

        .card-left {
            background-color: #f4f4f5;
        }
        .cardL-body {
            background: #f4f4f5;
        }

        .gift-record select, .gift-record input {
            display: inline-block;
            width: 40%;
            float: left;
        }
        .gift-record input {
            margin-left: 5px;
        }

        .imgbox{
            width:100%;
            height: 203px;
            border: 1px dashed #ececec;
        }
        .text{
            padding:10px;
            font-size:17px;
            font-weight:500;
        }
    </style>
</head>
<body>
{include file='public/header'/}
<!------------------导航-------------------------->
<section>
    {include file='public/left'/}
    <!--------------------------主要内容区域------------------------------------->
    <div class="content">
        <div class="panel mgl15 mgr15">
            <div class="panel-body">
                <!--路径导航-->
                <ol class="breadcrumb">
                    <li>当前位置是&nbsp;:</li>

                    <li><a href="javascript:history.back();">营销工具</a></li>
                    <li><a href="javascript:history.back(-1)">活动营销</a></li>
                    <li class="active" style="color: #02b87f;">公众号关注推送设置</li>
                </ol>
                <div>
                    <div class="alert alert-success" style="background-color: rgba(204, 228, 223, 0.3);margin-top: 10px;margin-bottom: 20px;">
                        <strong>
                            <i class="ti-info-alt"></i>
                        </strong>
                        新用户关注后推送的未领券消息，用户点击后可到领取页面。
                    </div>
                    <div class="card-content clearfix">
                        <div class="pull-left card-left">
                            <div class="cardL-body">
                                <div class="cardL-title" style="background: #000 url(/assets/merchant/image/APPtop.png) no-repeat center top;"></div>
                                <span class="activityTitle title"></span>
                                <div class="commodityImgBox" style="background:#fff;">
                                    <div class="imgbox">
                                        <img src="{$info['img_url']}"  alt="商品图片" class="commodityImg" style="display:none">
                                    </div>
                                    <div class="text">
                                        <span>您有未领取的优惠券！</span>
                                    </div>
                                </div>
                                <div class="mtop10 commodityIntroBox">
                                    <span class="color1 c-inlineblock c-aligh-left"></span>
                                </div>






                            </div>
                        </div>



                    </div>
                    <div class="cardR-right">
                        <div style="width: 100%;">


                            <div class="panel panel-default ng-scope">
                                <form action="" method="post" onsubmit="return check()" id="form1">
                                    <div class="panel-heading">
                                        公众号关注推送设置规则
                                    </div>
                                    <div class="panel-body">
                                        <div class="row">
                                            <div class="col-sm-6">


                                                <div class="form-horizontal" data-layout="horizontal">
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label">图片：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                        <div class="col-sm-9">
                                                            <img   {if condition="$info['img_url'] neq '' "}src="{$info['img_url']}" {/if} src="__STATIC_URL__/static/images/comcordImg.png"  alt="商品图片" class="img">
                                                            <div class="ng-scope" style="position: relative;">
                                                                <span class="btn btn-default">上传图片</span>
                                                                <input type="file" id="img" value=""  onchange="upload('img','file')"/>
                                                                <input type="hidden" name="img_url" id="logopic-upload" required  value="{$info['img_url']}" >

                                                            </div>
                                                            <div class="r-desc ng-binding ng-scope"> 图片建议尺寸：750像素*480像素，格式为.jpg，大小不超过2M.</div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="form-horizontal" data-layout="horizontal">
                                                    <div class="form-group">
                                                        <label class="col-sm-3 control-label">状态：<span class="glyphicon glyphicon-asterisk glyphicon-tip"></span></label>
                                                        <div class="col-sm-9">

                                                            <div class="switch" id="give" data-animated="true">
                                                                <input type="checkbox" name="status" value="{$info['status']}" id="status" {if condition="$info['status'] eq '1' "}checked{/if}/>

                                                            </div>

                                                        </div>
                                                    </div>
                                                </div>


                                            </div>
                                        </div>

                                    </div>
                                    <div class="panel-footer">
                                        <button class="btn btn-success" type="button" id="btn-success">保存</button>
                                    </div>
                                </form>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        {include file='public/footer'/}
    </div>
</section>

<script>
    function check(){
        var logopic=$("#logopic-upload").val();

        var card = $('input:radio:checked').val();
        var link_url = $('#link_url').val();


        if(logopic==""){
            alert('请上传图片！');
            return false;
        }
        // 校验通过，全部都不相同
        return true;

    }

</script>
<script>
    function upload(file, typed) {
        var formData = new FormData();
        formData.append('file', $('#' + file)[0].files[0]);
        formData.append('other', file);
        $.ajax({
            url: "{:url('uploads/upload')}",
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
        }).done(function (res) {
            console.log(res);
            if(res.code=="0"){
                //            左侧预览图背景
                $(".commodityImg").attr("src", res.pic);
//            右侧预览图片
                $(".img").attr("src", res.pic);
//            相应隐藏input传值
                $("#logopic-upload").val(res.pic);
            }else{
                layer.alert(res.message);
            }

            // $("." + file).attr("src", res.savapath).css("display", "block");
            // $(".file-" + file).val(res.other);
            // $("." + typed + "-" + file).val(res.other);
        }).fail(function (res) {
            alert("上传失败")
        });
    };
</script>
<script>
    $("#give").on('switch-change', function (e, data) {
        var $el = $(data.el), value = data.value;
        if(value==true){
            $("#status").val(1);
        }else{
            $("#status").val(0);
        }
    });
</script>
<script>
    $(function(){
        var img= $("#logopic-upload").val()
        if(img!==""){
            $(".commodityImg").attr("style","displsy:block");

        }
    })
</script>
<script>
    $("#btn-success").click(function(){
        var img_url=$("#logopic-upload").val();
        var status=$("#status").val();

        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "{:url('marketest/wxputsetup')}" ,//url
            data: {
                img_url:img_url,
                status:status
            },
            success: function (data) {

                console.log(data);//打印服务端返回的数据(调试用)
                if (data.code == 0) {
                    alert("保存成功！");
                    window.location.href="{:url('marke/tools')}";
                }
                ;
            },
            error : function() {
                alert("保存失败！");
            }
        });

    })
</script>
</body>

</html>
